<template>
  <!-- 卡片 -->
  <el-card class="box-card">
    <!-- 按钮 -->
    <div class="header">
      <el-button type="primary" @click="handleAddTrademark">
        添加品牌
      </el-button>
    </div>
    <!-- 弹框 -->
    <!-- 添加品牌上传图片 -->
    <el-dialog
      :title="(isUpdate ? '修改' : '添加') + '品牌'"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <!-- 品牌名称 -->
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="form.tmName" />
        </el-form-item>
        <!-- 品牌LOGO -->
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <!-- 上传图片 -->
          <el-upload
            class="avatar-uploader"
            :action="interceptUrl + '/admin/product/fileUpload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!-- eslint-disable-next-line -->
            <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">
              只能上传jpeg/jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleChangeTrademark">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <!-- 表格 -->
    <div class="body">
      <el-table v-loading="loading" :data="records" border style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50px"
        />
        <el-table-column
          prop="tmName"
          align="center"
          label="品牌名称"
          width="180"
        />
        <!-- scope:{
            row, 当前行数据
            $index 序号
          } -->
        <el-table-column v-slot="{ row }" label="品牌LOGO" align="center">
          <!-- eslint-disable-next-line --><!-- 忽略下一行的格式校验 -->
          <img :src="row.logoUrl" :alt="row.tmName" class="trademark-logo" />
        </el-table-column>
        <el-table-column v-slot="{ row }" label="操作" align="center">
          <el-button
            icon="el-icon-edit"
            type="warning"
            @click="handleUpdateTrademark(row)"
          >
            修改
          </el-button>
          <el-button
            icon="el-icon-delete"
            type="danger"
            @click="delTrademaskHandle(row.tmName, row.id)"
          >
            删除
          </el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="footer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageSize"
        layout="prev, pager, next, jumper , total, sizes"
        :total="total"
        :hide-on-single-page="value"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script>
import {
  reqGetBaseTrademark,
  reqAddBaseTrademark,
  reqDelTrademask,
  reqUpdateBaseTrademark
} from '@/api/product/trademark'

export default {
  name: 'Trademark',
  data() {
    return {
      // 品牌列表
      records: [],
      // 当前页码
      currentPage: 1,
      // 每页展示条数
      pageSize: 3,
      // 控制分页器的显示隐藏
      value: true,
      // 数据总条数
      total: 0,
      // 是否显示加载过渡效果
      loading: false,
      // 是否展示添加品牌弹框
      dialogVisible: false,
      // form表单收集的数据
      form: {
        // 要添加的品牌名称
        tmName: '',
        // 上传图片格式和大小符合要求返回成功时接收到的图片本地地址，用以在框中展示该图片
        logoUrl: '',
        // 要修改的品牌id
        id: ''
      },
      // 表单校验规则
      rules: {
        tmName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        logoUrl: {
          required: true,
          message: '请上传图片',
          trigger: 'blur'
        }
      },
      // 上传头像需要的代理服务器拦截路径
      interceptUrl: process.env.VUE_APP_BASE_API,
      // 判断是添加品牌或是修改品牌
      isUpdate: false
    }
  },
  mounted() {
    this.getBaseTrademark()
  },
  methods: {
    // 请求当前页展示的品牌数据
    async getBaseTrademark() {
      const { currentPage, pageSize } = this
      const { data } = await reqGetBaseTrademark(currentPage, pageSize)
      this.records = data.records
      // this.pages = data.pages
      this.total = data.total
    },
    // 每页条数改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.loading = true
      this.getBaseTrademark()
      this.loading = false
    },
    // 当前页码改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.loading = true
      this.getBaseTrademark()
      this.loading = false
    },
    // 关闭弹框，清空弹框内添加的品牌名称和品牌logo
    handleClose(done) {
      this.dialogVisible = false
      this.form.tmName = ''
      this.form.logoUrl = ''
      this.$refs.form.clearValidate()
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => {})
    },
    // 头像上传成功时执行函数
    handleAvatarSuccess(res, file) {
      // console.log(res, file)
      this.form.logoUrl = res.data
      this.$refs.form.clearValidate('logoUrl')
    },
    // 上传头像之前执行函数
    beforeAvatarUpload(file) {
      // 允许上传的图片格式 .jpeg .jpg .png
      const allowType = ['image/jpeg', 'image/jpg', 'image/png']
      const isAllowType = allowType.includes(file.type)
      // 允许上传的图片大小不大于500KB
      const isAllowSize = file.size / 1024 < 500

      if (!isAllowType) {
        this.$message.error('上传头像图片只能是 JPG ，JPEG ，PNG 格式!')
      }
      if (!isAllowSize) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }
      return isAllowType && isAllowSize
    },
    // 点击添加品牌
    handleAddTrademark() {
      this.dialogVisible = true
      this.isUpdate = false
    },
    // 添加品牌或修改品牌
    handleChangeTrademark() {
      this.$refs.form.validate(async valid => {
        // 校验通过，发送请求，在服务端增加数据
        if (valid) {
          this.$message({
            type: 'success',
            message: `${this.isUpdate ? '修改' : '添加'}品牌成功`
          })
          this.dialogVisible = false
          const { tmName, logoUrl, id } = this.form
          // 判断是否是修改品牌，分别向服务器发送不同的请求
          if (this.isUpdate) {
            await reqUpdateBaseTrademark(id, logoUrl, tmName)
          } else {
            await reqAddBaseTrademark(tmName, logoUrl)
          }
          // 请求完成后将弹框中添加的数据清空
          this.form.tmName = ''
          this.form.logoUrl = ''
          // 添加或修改新品牌后重新发送品牌列表请求，获取新的品牌列表进行展示
          this.getBaseTrademark()
        }
      })
    },
    // 删除品牌
    delTrademaskHandle(tmName, id) {
      // ESlint中async后跟箭头函数不能带空格，使用普通函数替代，缓存this避免this指向发生变化
      const _this = this
      this.$confirm(
        `您确定要删除<strong class="del-message">&nbsp;${tmName}&nbsp;</strong>品牌数据吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          // message会被当做HTML片段处理
          dangerouslyUseHTMLString: true
        }
      )
        .then(async function() {
          await reqDelTrademask(id)
          _this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除品牌后重新发送品牌列表请求，获取新的品牌列表进行展示
          _this.getBaseTrademark()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改品牌
    handleUpdateTrademark(row) {
      const { id, logoUrl, tmName } = row
      this.isUpdate = true
      this.dialogVisible = true
      this.form.tmName = tmName
      this.form.logoUrl = logoUrl
      this.form.id = id
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
}
.body {
  margin-bottom: 20px;
}
.el-input_inner {
  float: right;
}
// 品牌LOGO大小
.trademark-logo {
  width: 100px;
  height: 100px;
}
// 无法对element-ui组件样式进行修改，实际的类名在本组件中不存在，webpack在打包时不会
// 将该样式进行打包
/* .el-pagination__sizes {
  float: right;
} */
</style>
